<template>
	<div class="sidebar" id="sidebar">
		<el-menu
			class="sidebar-el-menu"
			:default-active="getActive"
			:collapse="collapse"
			background-color="#00284d"
			text-color="#bfcbd9"
			active-text-color="#fff"
			:unique-opened="true"
			router
		>
			<template v-for="(item, index) in sidebarData">
				<template v-if="item.permissions && item.permissions.length != 0">
					<el-submenu :index="item.name" :key="index">
						<!-- 一级菜单 -->
						<template slot="title">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.name }}</span>
						</template>
						<template v-for="(subItem, sindex) in item.permissions">
							<!-- 二级菜单 -->
							<el-menu-item :index="getSplit(subItem.resource)" :route="{ path: subItem.resource }" :key="sindex">{{
								subItem.name
							}}</el-menu-item>
						</template>
					</el-submenu>
				</template>
				<!-- 一级菜单 -->
				<template v-else>
					<el-menu-item :index="getSplit(item.resource)" :route="{ path: item.resource }" :key="index">
						<i :class="item.icon"></i>
						<span slot="title">{{ item.name }}</span>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import { mapState } from 'vuex';
	import bus from '../common/bus';
	import Cookies from 'js-cookie';
	import { mapMutations, mapGetters } from 'vuex';
	// import { getSidebar } from '@/utils/utils';
	export default {
		data() {
			return {
				collapse: false // 控制侧边栏合并 true 为合并 false 为展开
				// sidebarData: []
			};
		},
		watch: {
			$route: {
				deep: true,
				immediate: true,
				handler(a, b) {
					console.log(a, b);
					console.log(Object.prototype.toString.call(this.sidebarData));
					if (Object.prototype.toString.call(this.sidebarData) === '[object Array]' && this.sidebarData.length === 0) {
						console.log(7777);
						bus.$on('collapse', (msg) => {
							this.collapse = msg;
							// console.log(msg);
							bus.$emit('collapse-content', msg);
						});
						if (Cookies.get('access_token') || Cookies.get('refresh_token')) {
							// this.init();
							if (this.sidebarData.length === 0) {
								this.$getSidebar.call(this);
							}
						} else {
							// this.sidebarData = [];
							this.SET_SLIDEBAR_DATA([]);
						}
					}
				}
			}
		},
		activated() {
			// console.log(8888888)
			// bus.$on('collapse', msg => {
			//     this.collapse = msg;
			//     // console.log(msg);
			//     bus.$emit('collapse-content', msg);
			// });
			// this.init();
		},
		methods: {
			...mapMutations({
				SET_SLIDEBAR_DATA: 'SET_SLIDEBAR_DATA'
			}),
			// init() {
			// this.getSidebar();
			// },

			getSplit(path) {
				// console.log(path);
				if (path) {
					return path.split('/')[1];
				} else {
					// 什么都不做
				}
			}
		},
		computed: {
			...mapGetters({
				sidebarData: 'sidebarData'
			}),
			getActive() {
				var path = this.$route.path.split('/');
				console.log(path);
				return path[1];
			}
		}
	};
</script>

<style lang='scss'>
	#sidebar {
		&.sidebar {
			.el-menu {
				.el-submenu {
					.el-submenu__title {
						background-color: #00284d !important;
						&:hover {
							background-color: #00203e !important;
						}
					}
				}
			}
		}
		.el-menu--inline.el-menu > .el-menu-item.is-active {
			background-color: #008fe0 !important;
		}
		.el-menu--inline.el-menu > .el-menu-item {
			/* background-color: #1f2d3d !important; */
			/* background-color: #00284d !important; */
			background-color: #001528 !important;
		}

		.el-menu--inline.el-menu > .el-menu-item:hover {
			/* background-color: #008fe0 !important; */
			/* background-color: #001528 !important; */
			background-color: #008fe0 !important;
		}
		&.sidebar {
			display: block;
			position: absolute;
			left: 0;
			top: 70px;
			bottom: 0;
			overflow-y: scroll;
		}
		&.sidebar::-webkit-scrollbar {
			width: 0;
		}
		.sidebar-el-menu:not(.el-menu--collapse) {
			/* width: 250px; */
			width: 200px;
		}
		&.sidebar > ul {
			height: 100%;
		}
	}
</style>
